<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <Input
          placeholder="请输入要查询的设备序列号"
          v-model="bloc.form.deviceSn"
          style="width: 205px"
        />
        <Input
        placeholder="请输入要查询的售后经销商"
        v-model="bloc.form.dealerName"
        style="width: 205px; margin-right: 10px"
        />
        <Input
          placeholder="请输入要查询的顾客姓名"
          v-model="bloc.form.name"
          style="width: 170px; margin-right: 10px"
        />
        <Input
          placeholder="请输入要查询的维修员"
          v-model="bloc.form.maintenanceName"
          style="width: 160px; margin-right: 10px"
        />
        <DatePicker
          type="daterange"
          placeholder="维修时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.date"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询
        </Button>
        <Button icon="md-refresh" @click="bloc.reset()">重置</Button>
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              style="margin-left: 5px; margin-right: 5px"
              @click="detailItem(row)"
              type="info"
              v-if="Validation.check(Resources.POSTSALE_VIEW)"
            >详情
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { MaintainBloc } from '@/view/service/maintain/MaintainBloc';
    import { MainTain } from '@/base/model/MainTain';
    import { formatDate } from '@/base/util/Dates';
    import CompanySelector from '@/component/CompanySelector.vue';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';
    // import {isString} from 'element-ui/src/utils/types';
    import { MaintainrRecordBloc } from './MaintainRecordBloc';

    const columns = (bloc: MaintainrRecordBloc) => [
        {
            title: '设备序列号',
            key: 'SN',
            align: 'left',
            minWidth: 200,
            tooltip: true
        },
        {
            title: '顾客姓名',
            key: 'name',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '售后单号',
            key: 'num',
            align: 'left',
            minWidth: 200,
            tooltip: true
        },
        {
            title: '售后经销商',
            key: 'dealerName',
            align: 'left',
            minWidth: 200,
            tooltip: true
        },
        {
            title: '维修员',
            key: 'maintenanceName',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '保修期内',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.isUnderWarranty === '0' ? '否' : '是'
                    }
                });
            },
            width: 100,
            align: 'left',
            tooltip: true
        },
        {
            title: '配件费(元)',
            key: 'partsCost',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '人工费(元)',
            key: 'laborCost',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '维修时间',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: formatDate(
                            new Date(params.row.maintenanceTime),
                            'yyyy-MM-dd hh:mm:ss'
                        )
                    }
                });
            },
            width: 160,
            align: 'left',
            tooltip: true
        },
        {
            title: '总体星级',
            render: (h: any, params: any) => {
                return h('b', {
                    domProps: {
                        innerText: bloc.shuchu(params.row.star)
                    },
                    style: {
                        'color': '#F56C6C',
                        'font-size': '25px',
                        'font-weight': 'normal'
                    }
                });
            },
            width: 160,
            align: 'left',
            tooltip: true
        },
        {
            title: '操作',
            slot: 'action',
            width: 47 + 20,
            align: 'left',
            fixed: 'right'
        }
    ];

    @Component
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc
                    .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                    .catch((e) => {
                        vm.$Message.error('操作错误');
                    });
            });
        }

        bloc: MaintainrRecordBloc = new MaintainrRecordBloc();
        Validation = Validation;
        Resources = Resources;
        columns = columns(this.bloc);
        detailItem(dataItem: MainTain) {
            this.$router.push({
                path: '/service/maintainRecord/detail/' + dataItem.id
            });
        }
    }

</script>

<style lang="less">
</style>
